<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showContainer {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            border: 1px solid;
            overflow: hidden;
        }

        .container {
            width: 2600px;
            height: 280px;
            position: absolute;
            left: -520px;
        }

        .container img {
            float: left;
        }

        .nextorpre {
            width: 520px;
            position: absolute;
            top: 40%;
            font-size: 50px;
            color: red;
            z-index: 10;
        }

        .next {
            float: right;
            cursor: pointer;
        }
        .dots{
            width: 520px;
            height: 50px;
            position: absolute;
            z-index: 10;
            bottom: 20px;
            display: flex;
            justify-content: center;
        }
        .dots span{
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
            display: block;
            margin: 5px;
        }

    </style>
</head>

<body>
    <div class="showContainer">
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="nextorpre">
            <span class="pre">
                < </span>
                    <span class="next">></span>
        </div>
        <div class="container">
            <img src="./imgs/1t.png" alt="">
            <img src="./imgs/2t.png" alt="">
            <img src="./imgs/3t.png" alt="">
            <img src="./imgs/4t.png" alt="">
            <img src="./imgs/5t.png" alt="">
        </div>
    </div>
    <script>
        /* 
            实现点的功能 
                1.把点写入到页面里去； 
        
        */

        var containerEle = document.querySelector(".container");
        var showContainerEle = document.querySelector(".showContainer");

        var index = 0;  // 图片所在的位置索引值；
        var timer;
        autoPlay();
        function autoPlay() {
            console.log("autoplay");
            timer = setInterval(function () {
                move(containerEle, "left", -520 * (index + 1) - 520, function () {
                    index++;
                    console.log("运动结束", index);
                    if (index == 5) {
                        containerEle.style.left = "-520px";
                        index = 0;
                    }
                    changeDot();
                })
            }, 2000);  // 间隔时间需要大于 动画完成的事件
        }




        // 鼠标移入的时候 轮播图停止运动 ，鼠标移除的时候轮播图又自动开始轮播；
        // enter  、leave  ；  over out ；
        // 鼠标移入
        showContainerEle.onmouseenter = function () {
            // 停止轮播 
            clearInterval(timer);
        }
        // 鼠标移除 
        showContainerEle.onmouseleave = function () {
            // 从新开始轮播
            autoPlay();
        }


        // 实现点击下一页按钮之后切换到下一页 ；
        // 获取下一页按钮
        var nextEle = document.querySelector(".next");
        nextEle.onclick =debounce( function () {
            move(containerEle, "left", -520 * (index + 1) - 520, function () {
                index++;
                if (index == 5) {
                    containerEle.style.left = "-520px";
                    index = 0;
                }
                changeDot();
            })
        },1000);

        // 获取上一页按钮 
        var preEle = document.querySelector(".pre");
        preEle.onclick = function () {
            console.log("点击了上一页按钮", index);
            /* 
                index  0  ----》 0px
                index 1  ----》 -520px
                index 2 ----》 -1040px
                index n ---》 n*-520
            */
            move(containerEle, "left", -520 * index, function () {
                index--;
                console.log("index值是", index);
                if (index == -1) {
                    containerEle.style.left = "-2600px";
                    index = 4;
                }
                changeDot();
            })

        }






        // 要复制第一张图片 到最后一张图片的后面去；

        function copyImg() {
            // 获取第一个图片 
            var firstItem = containerEle.firstElementChild;
            // console.log(firstItem)
            // 给第一个元素复制一份 ；
            var copyFirstItem = firstItem.cloneNode(true);

            // 获取最后一张图 ；
            var lastItem = containerEle.lastElementChild;
            // console.log("?",lastItem);
            // 复制最后一张图 ；
            var copyLastItem = lastItem.cloneNode(true);

            containerEle.style.width = "3640px";
            // 把最后一张图添加到最前面；
            containerEle.insertBefore(copyLastItem, firstItem);

            // 把复制的第一张图片添加到最后
            containerEle.appendChild(copyFirstItem);
        }

        copyImg();



        // 图像切换的时候 点也会改变
        changeDot();
        function changeDot(){
            // 根据当前的index 的值来设置  点的样式 ；
            var dotEles = document.querySelectorAll(".dots span");

            dotEles.forEach(function(item,key){
                if(key==index){
                    item.style.background = "white";
                }else{
                    item.style.background = "red";
                }
            })

        }


    // 点击点的时候 轮播图需要切换到指定位置 ；

    var dotEles = document.querySelectorAll(".dots span");
    dotEles.forEach(function(item,key){
        item.onclick = function(){
            index = key;  
            console.log(key);
            move(containerEle, "left", -520 * (index + 1) , function () {
                changeDot();
            })
        }
    })

        var flag = true;
        window.addEventListener("visibilitychange", function () {
            if (flag) {
                console.log("切换走了");
                clearInterval(timer);
            } else {
                console.log("切换回来了");
                autoPlay();
            }
            flag = !flag;
        })
    


        function move(boxEle, dir, target, cb) {
            var timer = setInterval(function () {
                // 获取当前box的left值
                var num3 = parseInt(getComputedStyle(boxEle)[dir]);
                // 当前方块所在的位置 和 目标位置比较
                num3 += 10 * (target > num3 ? 1 : -1);
                boxEle.style[dir] = num3 + "px";
                // 假定 运动 500的时候开始向下移动；
                if (num3 == target) {
                    clearInterval(timer);
                    // console.log("停止了");
                    cb();
                }
            }, 1);
        }


        function debounce(fn, delay) {
            var timer = null;
            return function () {
                if (!timer) {
                    fn();
                }
                clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
                timer = setTimeout(function () {
                    timer = null;
                }, delay);
            }
        }
    </script>
</body>

</html>